<template>
  <div class="banner-preview-wrapper">
    <div v-if="config && config.list && config.list.length > 0">
      <el-carousel height="170px">
        <el-carousel-item v-for="(item, index) in config.list" :key="index">
          <el-image :src="item.url || item.image" fit="cover" class="banner-image">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
          <div v-if="item.name" class="banner-title">{{ item.name }}</div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else class="empty-placeholder">
      <i class="el-icon-picture-outline"></i>
      <p>轮播图区域</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "BannerPreview",
  props: {
    config: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>
.banner-preview-wrapper {
  width: 100%;
}
.banner-image {
  width: 100%;
  height: 100%;
  display: block;
}
.banner-title {
  position: absolute; bottom: 0; left: 0; width: 100%;
  padding: 5px 10px; background-color: rgba(0, 0, 0, 0.4);
  color: white; font-size: 14px; box-sizing: border-box;
}
.empty-placeholder {
  height: 170px; display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  background-color: #f5f5f5; color: #999;
}
.empty-placeholder i { font-size: 40px; margin-bottom: 8px; }
</style>
